<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>canvas start</title>
  </head>
  <body>
    <!-- <canvas>是脚本调用各种方法生成图像，SVG 则是一个 XML 文件，通过各种子元素生成图像。 -->
    <canvas id="myCanvas" width="400" height="250">您的浏览器不支持canvas</canvas>

    <script>
      const canvas = document.getElementById('myCanvas')
      // CanvasRenderingContext2D
      const ctx = canvas.getContext('2d')
      // WebGLRenderingContext
      // const wgl = canvas.getContext('webgl')

      // 开始绘制
      ctx.beginPath()
      ctx.moveTo(100, 100)
      ctx.lineTo(200, 200)
      ctx.lineTo(100, 200)
      // ctx.closePath()

      // 填充颜色 使之可见
      // ctx.fill()
      // ctx.stroke()

      // ctx.fillStyle = 'red'
      // ctx.fill()

      // ctx.strokeStyle = 'blue'
      // ctx.stroke()

      // 线条的宽度为3，线条的末端和交点都改成圆角，并且设置为虚线。
      ctx.lineWidth = 3
      ctx.lineCap = 'round'
      ctx.lineJoin = 'round'
      ctx.setLineDash([15, 5])
      ctx.stroke()


    </script>
  </body>
</html>
